<template>
  <div class="my-appointments">
    <el-card>
      <div class="appointments-title">我的预约单</div>
      <el-table :data="pagedAppointments" style="width: 100%" v-loading="loading">
        <el-table-column prop="date" label="预约日期" min-width="120" />
        <el-table-column prop="department" label="科室" min-width="120" />
        <el-table-column prop="doctor" label="医生" min-width="100" />
        <el-table-column prop="time" label="时段" min-width="100" />
        <el-table-column prop="status" label="状态" min-width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === '已完成' ? 'success' : (scope.row.status === '已取消' ? 'info' : 'warning')">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="120">
          <template #default="scope">
            <el-button size="small" @click="showDetail(scope.row)">详情</el-button>
            <el-button size="small" type="danger" v-if="scope.row.status === '待就诊'" @click="cancelAppointment(scope.row)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="appointments.length"
          layout="prev, pager, next, jumper, ->, total"
          @current-change="handlePageChange"
        />
      </div>
      <el-dialog v-model="showDialog" title="预约详情" width="500px" center>
        <div v-if="currentAppointment">
          <div class="detail-item"><b>预约日期：</b>{{ currentAppointment.date }}</div>
          <div class="detail-item"><b>科室：</b>{{ currentAppointment.department }}</div>
          <div class="detail-item"><b>医生：</b>{{ currentAppointment.doctor }}</div>
          <div class="detail-item"><b>时段：</b>{{ currentAppointment.time }}</div>
          <div class="detail-item"><b>状态：</b>{{ currentAppointment.status }}</div>
          <div class="detail-item"><b>备注：</b>{{ currentAppointment.remark }}</div>
        </div>
        <template #footer>
          <el-button @click="showDialog = false">关闭</el-button>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
const loading = ref(false)
const appointments = ref([
  { id: 1, date: '2023-10-01', department: '心血管内科', doctor: '李明', time: '08:30-09:00', status: '待就诊', remark: '请提前10分钟到院' },
  { id: 2, date: '2023-09-15', department: '呼吸与危重症医学科', doctor: '王芳', time: '10:00-10:30', status: '已完成', remark: '已就诊' },
  { id: 3, date: '2023-08-20', department: '骨科', doctor: '张伟', time: '09:00-09:30', status: '已取消', remark: '用户主动取消' },
  { id: 4, date: '2023-07-10', department: '普通外科', doctor: '李娜', time: '08:30-09:00', status: '待就诊', remark: '' },
  { id: 5, date: '2023-06-05', department: '妇科', doctor: '赵强', time: '08:30-09:00', status: '已完成', remark: '已就诊' }
])
// 从localStorage中获取预约信息
const storedAppointments = JSON.parse(localStorage.getItem('appointments') || '[]')
if (storedAppointments.length > 0) {
  appointments.value = storedAppointments
}
const currentPage = ref(1)
const pageSize = ref(5)
const showDialog = ref(false)
const currentAppointment = ref<any>(null)
const pagedAppointments = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  return appointments.value.slice(start, start + pageSize.value)
})
function handlePageChange(page: number) {
  currentPage.value = page
}
function showDetail(appointment: any) {
  currentAppointment.value = appointment
  showDialog.value = true
}
function cancelAppointment(appointment: any) {
  appointment.status = '已取消'
  appointment.remark = '用户主动取消'
}
</script>
<style scoped>
.my-appointments {
  max-width: 900px;
  margin: 40px auto;
}
.appointments-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1976d2;
  margin-bottom: 24px;
  text-align: center;
  letter-spacing: 2px;
}
.pagination {
  margin: 24px 0 0 0;
  display: flex;
  justify-content: center;
}
.detail-item {
  margin-bottom: 12px;
  font-size: 1.08rem;
}
</style> 